<template>
  <div>
    <h1>【aty-cascader】 component demo</h1>
    <p>【aty-cascader】 本质</p>
    <aty-row class="fd-radio-box">
      <aty-row>
        <aty-title level="4">1.【aty-cascader】  基础</aty-title>
        <aty-cascader :data="data" :value.sync="value1" />
        {{value1}}
      </aty-row>
      <aty-row>
        <aty-title level="4">2.【aty-cascader】  默认值</aty-title>
        <aty-cascader :data="data" :value.sync="value2" />
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-cascader】  hover</aty-title>
        <aty-cascader :data="data" trigger="hover" />
      </aty-row>
      <aty-row>
        <aty-title level="4">4.【aty-cascader】  自定义</aty-title>
        <aty-panel>{{text}}</aty-panel>
        <aty-cascader :data="data" @change="handleChange">
          <a href="javascript:void(0)">选择</a>
        </aty-cascader>
      </aty-row>

      <aty-row>
        <aty-title level="4">5.【aty-cascader】  禁用</aty-title>
        <aty-row>
          <aty-col span="8">   <aty-cascader :data="data2" disabled /></aty-col>
          <aty-col span="8" push="2">   <aty-cascader :data="data2" /></aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">6.【aty-cascader】  选择即改变</aty-title>
        <aty-cascader :data="data" change-on-select />
      </aty-row>

      <aty-row>
        <aty-title level="4">7.【aty-cascader】  自定义已选项</aty-title>
        <aty-cascader :data="data3" :render-format="format" />
      </aty-row>

      <aty-row>
        <aty-title level="4">8.【aty-cascader】  大小</aty-title>
        <aty-col span="5"> <aty-cascader :data="data" :value.sync="value1" size="small" /></aty-col>
        <aty-col span="5" push="2"> <aty-cascader :data="data" :value.sync="value1" size="default" /></aty-col>
        <aty-col span="5" push="4"> <aty-cascader :data="data" :value.sync="value1" size="large" /></aty-col>

      </aty-row>

      <aty-row>
        <aty-title level="4">9.【aty-cascader】 动态加载 </aty-title>
        <aty-cascader :data="dataAsync" :load-data="loadData" :value.sync="value1" />
      </aty-row>

      <aty-row>
        <aty-title level="4">11.【aty-cascader】 带label </aty-title>
        <aty-form-item
          :label="'label'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="label"
          :required="true"
          :showMessage="true">
          <aty-cascader :data="data" :value.sync="value1" />
        </aty-form-item>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value1: [],
      value2: ['jiangsu', 'suzhou', 'zhuozhengyuan'],
      text: '',
      dataAsync: [
        {
          value: 'beijing',
          label: '北京',
          // 数据中必须带这个
          children: [],
          loading: false
        },
        {
          value: 'hangzhou',
          label: '杭州',
          children: [],
          loading: false
        }
      ],
      data: [{
        value: 'beijing',
        label: '北京',
        children: [
          {
            value: 'gugong',
            label: '故宫'
          },
          {
            value: 'tiantan',
            label: '天坛'
          },
          {
            value: 'wangfujing',
            label: '王府井'
          }
        ]
      }, {
        value: 'jiangsu',
        label: '江苏',
        children: [
          {
            value: 'nanjing',
            label: '南京',
            children: [
              {
                value: 'fuzimiao',
                label: '夫子庙'
              }
            ]
          },
          {
            value: 'suzhou',
            label: '苏州',
            children: [
              {
                value: 'zhuozhengyuan',
                label: '拙政园'
              },
              {
                value: 'shizilin',
                label: '狮子林'
              }
            ]
          }
        ]
      }],
      data2: [{
        value: 'zhejiang',
        label: '浙江',
        children: [{
          value: 'hangzhou',
          label: '杭州',
          children: [{
            value: 'xihu',
            label: '西湖'
          }]
        }]
      }, {
        value: 'jiangsu',
        label: '江苏',
        disabled: true,
        children: [{
          value: 'nanjing',
          label: '南京',
          children: [{
            value: 'zhonghuamen',
            label: '中华门'
          }]
        }]
      }],
      data3: [{
        value: 'zhejiang',
        label: '浙江',
        children: [{
          value: 'hangzhou',
          label: '杭州',
          children: [{
            value: 'xihu',
            label: '西湖',
            code: 310000
          }]
        }]
      }, {
        value: 'jiangsu',
        label: '江苏',
        children: [{
          value: 'nanjing',
          label: '南京',
          children: [{
            value: 'zhonghuamen',
            label: '中华门',
            code: 210000
          }]
        }]
      }]

    }
  },
  methods: {
    handleChange (value, selectedData) {
      this.text = selectedData.map(o => o.label).join(', ')
    },
    format (labels, selectedData) {
      const index = labels.length - 1
      const data = selectedData[index] || false
      if (data && data.code) {
        return labels[index] + ' - ' + data.code
      }
      return labels[index]
    },
    loadData (item, callback) {
      item.loading = true
      setTimeout(() => {
        if (item.value === 'beijing') {
          item.children = [
            {
              value: 'talkingdata',
              label: 'TalkingData'
            },
            {
              value: 'baidu',
              label: '百度'
            },
            {
              value: 'sina',
              label: '新浪'
            }
          ]
        } else if (item.value === 'hangzhou') {
          item.children = [
            {
              value: 'ali',
              label: '阿里巴巴'
            },
            {
              value: '163',
              label: '网易'
            }
          ]
        }
        item.loading = false
        callback()
      }, 1000)
    }
  }
}
</script>
<style  lang="less" type="text/less"  scoped>
    .fd-radio-box {
        margin: 20px;
        text-align: left;
    }
    .fd-radio-box>.aty-row {
        padding-bottom: 15px;
    }

</style>
